
   function own_table(p_o) {
    var to_div_name;
    if($("."+p_o.to_div_name).length!=0){
      to_div_name= $("."+p_o.to_div_name);
    }else{
     alert("缺失目标元素");return;
    }
     var row=p_o.row||16;
     var col=p_o.col||16;
     
     var ui_breach=p_o.ui_breach||0;
     var data_breach=p_o.data_breach||0;
     var direction=p_o.direction||0;

     var breach_gradient=p_o.breach_gradient||"1.05em";
   
     var row_name=p_o.col_name||[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
     var col_name=p_o.row_name||["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P"];

     var breach_arr =["left_top","left_bottom","right_top","right_bottom"];
     var span_arr =["left_span","middle_span","right_span"];
     var direction_arr =["horizontal", "vertical"];
     var span_arr=['span1','span2','span3'];

     var shape=p_o.shape;

     // 定义标题栏 高度/ 宽度
     var obj  =  new Object();
     // 设置缺角倾斜度
     obj.breach_gradient = breach_gradient ;
     obj.row =row;
     obj.col =col;
     obj.ui_breach =  breach_arr[ui_breach];
     obj.data_breach = breach_arr[data_breach];
     obj.row_name =row_name;
     obj.col_name = col_name;
     obj.box = to_div_name;
     obj.box_w =  obj.box.width();
     obj.box_h =  obj.box.height();
     console.log(obj.box_w, obj.box_h)
     obj.direction = direction_arr[direction];
     // 总电池数
     obj.count_td=function count_td(){return obj.row*obj.col};
     
     obj.get_shape= function get_shape(shape){

        if(shape.toLocaleLowerCase().match(/^["u"]$|^["n"]["u"]$/g)!=null){
         shape=shape.toLocaleLowerCase();
        }else{
            shape= "nu";
            alert("shape参数错误, 将使用默认值NU");
        }
        return shape;
     }
     obj.shape= obj.get_shape(shape);

     if(obj.direction=="horizontal"){
       if(obj.shape=="u"){
         obj.dir_shp= "h_u";
       }else{
         obj.dir_shp= "h_nu";
       }
     }else{
       if(obj.shape=="u"){
         obj.dir_shp= "v_u";
       }else{
        obj.dir_shp= "v_nu";
       }
     }

     
     obj.init_data=function(){
             
             var data_head='';
             var data_num='';
             var data_span='';
             var row_data=[] ;
             var simple_box='';
             var all_box=[];
             var inner_div=[];
             var box_return=[];
             var row_height = (obj.dom.height()/obj.row);
             var col_width = (obj.dom.width()/obj.col);
             obj.init_title_data();

             if(obj.shape=="nu"){
               switch (obj.direction){
                 case "horizontal":
                   for(var x=0;x<obj.row;x++){
                   data_head=obj.col*x;
                   row_data=[];
                   for(var y=1;y<obj.col+1;y++){
                     data_num=data_head+y;
                    
                   //  simple_box="<div id="+data_num+" class='data_num_box'  onclick='openlocalprogram(this)' style='width:"+col_width+"px;height:"+row_height+"px;''>\
                   //   <div class='col-xs-12'>\
                   //   <span class='span1 h col-xs-6 ver_center '></span><span class='h col-xs-6 span2 ver_center'>"+data_num+"</span>\
                   //  </div> </div>";

                   simple_box="<div id="+data_num+" class='data_num_box'   onclick='openlocalprogram(this)' style='width:"+col_width+"px;\
                   height:"+row_height+"px;'>\
                   <div class='col-xs-12'>\
                   <span class='h col-xs-6 span2 ver_center bor-r'>"+data_num+"</span><span class='span1 h col-xs-6 ver_center '></span>\
                   </div></div>";
                     row_data.push(simple_box);
                   }
                  all_box.push(row_data);
                 }
                 break;

                 case "vertical":
                 // alert(2123);
                   for(var x=1;x<obj.row+1;x++){
                     row_data=[];
                     for(var y=0;y<obj.col;y++){
                       data_num=x+obj.row*(y);
                      
                       // simple_box="<div id="+data_num+" class='data_num_box'   onclick='openlocalprogram(this)' style='width:"+col_width+"px;\
                       //  style='min-height: 1.7em;''>\
                       // <div class='col-xs-12'>\
                       // <span class='h col-xs-6 span2 ver_center bor-r'>"+data_num+"</span><span class='span1 h col-xs-6 ver_center '></span>\
                       // </div></div>";
                       simple_box="<div id="+data_num+" class='data_num_box'   onclick='openlocalprogram(this)' style='width:"+col_width+"px;height:"+row_height+"px;'>\
                       <div class='col-xs-12'>\
                       <span class='h col-xs-6 span2 ver_center bor-r'>"+data_num+"</span><span class='span1 h col-xs-6 ver_center '></span>\
                       </div></div>";

                       


                       row_data.push(simple_box);
                     }

                  all_box.push(row_data);
                 }
                 break;

                 default:;

              }
             } else{
                 switch (obj.direction){
                   case "horizontal":
                     for(var x=0;x<obj.row;x++){
                       row_data=[];
                       data_head=obj.col*x;
                       for(var y=1;y<obj.col+1;y++){
                         data_num=data_head+y;
                         // simple_box="<div id="+data_num+" class='data_num_box'   onclick='openlocalprogram(this)' style='width:"+col_width+"px;height:"+row_height+"px;''><span class='left_top'></span><span class='right_top'></span><span class='left_bottom'>"+data_num+"</span><span class='right_bottom'></span></div>";
                         simple_box="<div id="+data_num+" class='data_num_box'   onclick='openlocalprogram(this)' style='width:"+col_width+"px;height:"+row_height+"px;'>\
                         <div class='col-xs-12'>\
                         <span class='h col-xs-6 span2 ver_center bor-r'>"+data_num+"</span><span class='span1 h col-xs-6 ver_center '></span>\
                         </div></div>";
                       row_data.push(simple_box);
                       }
                       if(x%2==1){
                         // console.log(row_data);
                         row_data=row_data.reverse();
                       }
                       all_box.push(row_data); 
                     }
                     break;

                   case "vertical":
                        
                       for(var x=1;x<obj.row+1;x++){
                          row_data=[];
                         for(var y=0;y<obj.col;y++){
                           data_num=x+obj.row*(y);

                           if(y%2==1){
                             data_num=(obj.row-x+1)+obj.row*(y);
                           }
                         
                           // simple_box="<div id="+data_num+" class='data_num_box'   onclick='openlocalprogram(this)' style='width:"+col_width+"px;height:"+row_height+"px;''><span class='left_top'></span><span class='right_top'></span><span class='left_bottom'>"+data_num+"</span><span class='right_bottom'></span></div>";
                           
                           simple_box="<div id="+data_num+" class='data_num_box'   onclick='openlocalprogram(this)' style='width:"+col_width+"px;height:"+row_height+"px;'>\
                           <div class='col-xs-12'>\
                           <span class='h col-xs-6 span2 ver_center bor-r'>"+data_num+"</span><span class='span1 h col-xs-6 ver_center '></span>\
                           </div></div>";
                       row_data.push(simple_box);

                       }
    
                   all_box.push(row_data);
                   }
                   break;

                   default:;
                    }
             }

             // 数据翻转
             switch(obj.data_breach){
               // 垂直翻转
               case "left_bottom":
                 all_box=all_box.reverse();
                 break;
               // 水平翻转
               case "right_top":
                 all_box.forEach(function(a){
                   a=a.reverse();
                   box_return.push(a);
                 });
                 break;
               // 垂直 + 水平 翻转
               case "right_bottom":
                 all_box=all_box.reverse();
                 all_box.forEach(function(a){
                   a=a.reverse();
                   box_return.push(a);
                 });
                 break;
               default:;
             }

             for(let i of all_box){
                for(let j of i){
                  inner_div.push(j);

                }
              
             }
          
             obj.dom.html(inner_div);
     };


     obj.init_t_ui=function(){
       obj.box.find(".t_title,.b_title").height(obj.box_h*0.04);
       obj.box.find(".my_table").height(obj.box_h*0.92);

       obj.t_title_h= obj.box.find(".t_title").height();
       obj.box.find(".l_title,.r_title").width(obj.t_title_h);

       obj.box.find(".data_zone,.t_title,.b_title").width(obj.box_w-obj.t_title_h*2);
     };

     obj.init_title_data=function(){
        var col_title_init=obj.set_row_title();
        var row_title_init=obj.set_col_title();

         $(".t_title,.b_title").html(col_title_init);

         if(obj.ui_breach=="left_top"||obj.ui_breach=="left_bottom"){
           obj.box.find(".l_title").html(row_title_init[0]);
           obj.box.find(".r_title").html(row_title_init[1]);
         }else{
           obj.box.find(".l_title").html(row_title_init[1]);
           obj.box.find(".r_title").html(row_title_init[0]);
         }
         //调整缺角位置
        obj.change_ui_breach();
     }
      //添加标题_row   1-16
     obj.set_row_title=function set_row_title(){
             var row_width=(obj.box_w-obj.t_title_h*2)/obj.col;
             var row_name=obj.row_name;
             var breach =obj.breach;
             var row_box=[];
             var simple_box='';
             var title_div='';

             for(let i=0;i<obj.col;++i){
               simple_box="<div style='width:"+row_width+"px;float:left;height:100%;' class='x_col_num_div'><div class='title_col_boxtitle_col_box h'>"+row_name[i]+"</div></div>";
               row_box.push(simple_box);
             }
             
             if(obj.data_breach=="right_top" || obj.data_breach=="right_bottom"){
               row_box=row_box.reverse();
             }

             row_box.forEach(function(a){
               title_div+=a;
             });

             return title_div;
     }
        
      // 添加标题_col  A-P
     obj.set_col_title= function set_col_title(){

           var blank_height=obj.box_h*0.04;
           var row_height=obj.box_h*0.92/obj.row;
           var col_name=obj.col_name;
           var row=obj.row;

           var col_box=[];
           var title_div='';
           var title_div_mirror='';
           var result_title_div=[];
           var simple_box='';
           var simple_box_2='';

           // 空白角
           col_box.push("<div style='width:100%;height:"+blank_height+"px;'  class='y_row_num_div'><div class='title_row_box'></div></div>");

           for(let i=0;i<obj.row;++i){
             // console.log(col_name[i]);
             simple_box="<div style='width:100%;height:"+row_height+"px;' class='y_row_num_div'><div class='title_row_box h ver_center'>"+col_name[i]+"</div></div>";
             col_box.push(simple_box);
           }

           // 空白角
           simple_box_2="<div style='width:100%;height:"+blank_height+"px;'  class='y_row_num_div'><div class='title_row_box'></div></div>";
           col_box.push(simple_box_2);
 
           // console.log(obj.data_breach);
           if(obj.data_breach=="left_bottom" || obj.data_breach=="right_bottom"){
             col_box=col_box.reverse();
             col_box.forEach(function(a){
               title_div+=a;
             });
             
             col_box.pop();
             col_box.push(simple_box_2);
           }else{
             col_box.forEach(function(a){
               title_div+=a;
             });
             col_box.shift();
             col_box.unshift(simple_box_2);
           }
            // console.log(col_box);
           col_box.forEach(function(a){
             title_div_mirror+=a;
           });

           result_title_div.push(title_div);
           result_title_div.push(title_div_mirror);
           return result_title_div;
     }
    
     //调整缺角样式
     obj.change_ui_breach= function change_ui_breach(){
       var breach =obj.ui_breach;
       if(breach=="left_top"){
           obj.box.find(".l_title .y_row_num_div").eq(0).addClass("triangle_top");
           obj.box.find(".triangle_top").css("background","linear-gradient(-45deg,#b5b5b5 " + obj.breach_gradient + ", rgba(0,0,0,0) 0)");

       }else if(breach=="left_bottom"){
         // alert(obj.col+1);
           obj.box.find(".l_title .y_row_num_div").eq(obj.row+1).addClass("triangle_top");
           obj.box.find(".triangle_top").css("background","linear-gradient(-135deg,#b5b5b5 " + obj.breach_gradient + ", rgba(0,0,0,0) 0)");
       }else if(breach=="right_top"){
            obj.box.find(".r_title .y_row_num_div").eq(0).addClass("triangle_top");
           obj.box.find(".triangle_top").css("background","linear-gradient(45deg,#b5b5b5 " + obj.breach_gradient + ", rgba(0,0,0,0) 0)");
       }else{

            obj.box.find(".r_title .y_row_num_div").eq(obj.row+1).addClass("triangle_top");
           obj.box.find(".triangle_top").css("background","linear-gradient(135deg,#b5b5b5 " + obj.breach_gradient + ", rgba(0,0,0,0) 0)");
       }
       obj.box.find(".triangle_top").css("border-top","none");
       obj.box.find(".triangle_top").css("border-right","none");
     }


     // 遍历更换元素内容, 参数说明如下:
     // which_span指定每个栅格的span , 参数为0-2 : 左1  左2  左3 
     // modify_param 不为空时修改指定的span的数据 , 格式为object,  左边为增加的属性右边为对应的值 ;  text属性为修改span的文本
     // 新属性会覆盖原有属性
     // 允许缺失部分参数, 但不允许缺失which_span

     obj.change_span=function(span_idx,which_span=null,modify_param=null){
           // console.log(123);
           if(span_idx==null){
             alert("change_span_text缺失第span id");
             return;
           }
           if(which_span==null){
             alert("change_span_text缺失第span位置");
             return;
           }
           // 替换span 数据
           if(modify_param!=null){
             if(which_span>=0 && which_span<3){
               which_span=span_arr[which_span];
             }else{
                 alert("change_span第二个参数只能是0-3");
             }

             for(let i in modify_param){
               if(i=="text"){
                 var t="#"+span_idx+" ."+which_span;
                  obj.dom.find(t).html(modify_param[i]);
               }else{
                 obj.dom.find(".data_num_box ."+which_span).attr(i,modify_param[i]);
               }
           }
         }
     };

     // 右键
     obj.context_click=function context_click(){
      return ;
      
       // var context_menu = [
       //     {
       //         icon: 'glyphicon-plus',
       //         text: '寄存',
       //         action: function(e, selector) { 
       //            tray_click('stop',selector);
        
       //         }
       //     },{
       //         icon: 'glyphicon-trash',
       //         text: '激活',
       //         action: function(e, selector) {
       //             tray_click('start',selector);
       //         }
       //     }
       // ];
       //     // 阻止预定义右键行为
       //     context.init({preventDoubleContext: true});
       //     // 绑定事件
       //     // console.log(to_div_name);
       //     context.attach($("."+p_o.to_div_name), context_menu);
       }
     // 表格初始化 ,有元素则初始化
     obj.init=function(){
       var div_content ='<!-- 左侧标题 -->  <div class="l_title" style="height: 100%;float: left;">  </div> \
        <div class="data_zone"style="height: 100%;float: left;background-color: white">  \
         <!-- 顶部标题 -->    <div class="t_title " style="width: 100%"></div> \
           <div class="my_table" class="col-md-10" style="width: 100%;"></div>     \
       <!-- 底部标题 -->    <div class="b_title " style="width: 100%"></div>  </div>  \
       <!-- 右侧标题 -->  <div class="r_title " style="height: 100%;float: left;">  </div>';
       obj.box.html(div_content);
       obj.dom = obj.box.find(".my_table");

       obj.init_t_ui();

       obj.init_data();
       
       if(obj.row >=6||obj.col>=6){
           if(obj.row >=12||obj.col>=12){
              obj.dom.find(".data_num_box span").css("font-size","0.5em");
           }
           obj.dom.find(".data_num_box span").css("font-size","0.8em");
       }else{
         obj.dom.find(".data_num_box span").css("font-size","1em");
       }
       obj.context_click();
     
     }


     if(obj.box.length!=0){
        obj.init();
     }
     return obj;
  }



 // for phone which width<750px

 // 使用方式: 
 // var param={
 //      "battery_count":24, 
 //      "to_div_name":"demo",
 //  };
 // var oTable= new own_table_phone(param);
 // oTable.change_data(index,{cur:,vol:});
 function own_table_phone(p_o){
   // console.log(p_o);
       var obj  =  new Object();

       if($("."+p_o.to_div_name).length!=0){
         obj.box= $("."+p_o.to_div_name);
         if(obj.box.html()!=''){
           obj.box.html('');
         }
       }else{
         alert("缺失父元素");return;
       }
       obj.box_html= '<div class="title row text-center" style=""><div class="h id_part_title pull-left" style="width:20%"></div><div class="h data_part_title pull-left" style="width:80%"></div></div><div class="data row text-center"><div class=" h id_part pull-left" style="width:20%"><div class="col-xs-12" class=""></div></div><div class=" h data_part pull-left" style="width:80%"></div></div>';
       init_ui();
     
       function init_ui(){
         obj.box.html(obj.box_html);
         obj.battery_count= p_o.battery_count;
         // obj.ele_height=obj.box.height();
         obj.ele_height=window.screen.availHeight;
         obj.box.height(obj.ele_height);
         obj.box.css('overflow-y',"auto");
         obj.list_count=15;  //  display per page
         obj.per_ele_height = obj.ele_height/obj.list_count;
        
         var html_id= '';

         for (let i=1;i<=obj.battery_count;++i) {
           var html= '<div class=" per_ele_height">'+i+'</div>';
           html_id+=html;
         }
         obj.box.find('.id_part').html(html_id);
         obj.box.find('.data_part').html(html_id);
         obj.box.find('.id_part .per_ele_height,.data_part .per_ele_height').height(obj.per_ele_height);
         obj.box.find('.id_part .per_ele_height,.data_part .per_ele_height').css("line-height",obj.per_ele_height+"px");

         obj.box.find('.id_part_title').html("<b>ID</b>");
         obj.box.find('.data_part_title').html("<span class='half bor-r'><b>电流</b></span><span class='half'><b>电压</b></span>");

         obj.box.find('.id_part_title').height(obj.per_ele_height);
         obj.box.find('.data_part_title').height(obj.per_ele_height);
         obj.box.find('.data_part_title,.id_part_title').css("line-height",obj.per_ele_height+'px');

         obj.box.find(".data").height(obj.box-obj.per_ele_height);
         obj.data_per_half='<div class="col-xs-6 left h"></div><div class="col-xs-6 h right"></div>';
         obj.box.find(".data_part .per_ele_height").each(function(a,b){
           $(b).html(obj.data_per_half);
         });
           obj.box.find('.per_ele_height').addClass('bor');
           obj.box.find('.left').addClass('bor-r');
           obj.box.find('.title div').addClass('bor');

         }
       // index 0 start
       obj.change_data= function change_data(index,par){
         var cur=par.cur;
         var vol=par.vol;
         obj.box.find(".data_part .left").eq(index).html(cur);
         obj.box.find(".data_part .right").eq(index).html(vol);
       }
       // obj.box.find('.data').css('overflow-y',"auto");
       // console.log(obj.init_data);
       return obj;
 }


